<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%  
response.setHeader("Access-Control-Allow-Origin", "*");  
%> 

     
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


 

<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>宏观数据·数据工厂</title>
	<link href="${pageContext.request.contextPath }/img/webLogoIcon.png" rel="shortcut icon">
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/font-awesome.css" rel="stylesheet">
	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

	
    <link href="${pageContext.request.contextPath }/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/style.css" rel="stylesheet">
    



    <!-- FooTable -->
    <link href="${pageContext.request.contextPath }/css/footable.core.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/css/mypage.css" rel="stylesheet">
<style>
        /*table样式*/
        .table{width:100%;margin:auto;padding-top:0;font-size:12px;text-align:center;color:#666;}
        .table th{background-color:#f9f9f9;border:1px solid #e8e8e8;;height:40px;font-weight: bold;}
        .table td{border:1px solid #e8e8e8;border-top:0;height:40px;padding:0px 4px}
        .table tr:nth-child(2n){background-color:#f9f9f9}
        /*固定*/
        .container {position: relative;}
        .table1, .table2 {width: 800px;}
        .table2 {width: 100%;}
        .table1 {position: absolute;overflow: hidden;}
        .table1 td,th{background-color: white;}
        .table2 {overflow-x: scroll;}
        .read {height:100px}
        #time th{
        	min-width: 100px; max-width: 100px;width: 100px;
        }
    </style>
</head>

<body>

    <div id="wrapper">

        <nav class="navbar-default navbar-static-side" role="navigation">
            <%request.setAttribute("LEFT", "nationalData");%>
            <%@include file="../components/left.jsp"%>
        </nav>

        <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom" style="margin-bottom: 20px;">
		<jsp:include page="../components/head.jsp" flush="true" />
        </div>
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>宏观数据</h2>
                <ol class="breadcrumb">
                	<li class="nav-main1">
                		<a href="${pageContext.request.contextPath}/admin/tosystem_overview">主页</a>
                	</li>
                	<li class="active">
                		<span>政府数据</span>
                	</li>
                	<li class="active">
                		<a>宏观数据</a>
                	</li>
               	</ol>
            </div>
        </div>

        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                     <div class="ibox float-e-margins" id="dataInfoLine"></div>
                        <div class="ibox-content">
                            
                            <div class="row m-t-sm">
                                <div class="col-lg-12">
                                <div class="panel blank-panel">

                                <div class="panel-body">

                                <div class="tab-content">
	                                <div class="tab-pane active" id="tab-1">
	                                	<div class="col-lg-3">
					                <div class="ibox float-e-margins">
					                    <div class="ibox-content mailbox-content">
					                        <div id="jstree1">
						                        <ul>
						                            <li class="jstree-open">指标
						                                <ul>
						                                	<li class="jstree-close">价格指数
						                                        <ul>
						                                            <li class="jstree-close">居民消费价格分类指数(上年同月=100)
						                                            	<ul>
								                                            <li class="jstree-close"><a href="#" title="全国居民消费价格分类指数(上年同月=100)(2016-)">全国居民消费价格分类指数(上年同月=100)(2016-)</a></li>
								                                            <li class="jstree-close"><a href="#" title="全国居民消费价格分类指数(上年同月=100)(-2015)">全国居民消费价格分类指数(上年同月=100)(-2015)</a></li>
								                                            <li class="jstree-close"><a href="#" title="全国食品类居民消费价格指数(上年同月=100)">全国食品类居民消费价格指数(上年同月=100)</a></li>
								                                        </ul>
						                                            </li>
						                                            <li class="jstree-close">居民消费价格分类指数(上年同期=100)</li>
						                                            <li class="jstree-close">居民消费价格分类指数(上月=100)</li>
						                                        </ul>
						                                    </li>
						                                    <li class="jstree-close">工业
						                                        <ul>
						                                            <li class="jstree-close">action.html</li>
						                                            <li class="jstree-close">alert.html</li>
						                                            <li class="jstree-close">billing.html</li>
						                                        </ul>
						                                    </li>
						                                    <li class="jstree-close">能源
						                                        <ul>
						                                            <li class="jstree-close">glyphicons-halflings-regular.eot</li>
						                                            <li class="jstree-close">glyphicons-halflings-regular.svg</li>
						                                            <li class="jstree-close">glyphicons-halflings-regular.ttf</li>
						                                            <li class="jstree-close">glyphicons-halflings-regular.woff</li>
						                                        </ul>
						                                    </li>
						                                    <li class="jstree-close">固定资产投资(不含农户)
						                                        <ul>
						                                            <li class="jstree-close">profile_small.jpg</li>
						                                            <li class="jstree-close">angular_logo.png</li>
						                                            <li class="jstree-close">html_logo.png</li>
						                                            <li class="jstree-close">mvc_logo.png</li>
						                                        </ul>
						                                    </li>
						                                    <li class="jstree-close">服务业生产指数
						                                        <ul>
						                                            <li class="jstree-close">inspinia.js</li>
						                                            <li class="jstree-close">bootstrap.js</li>
						                                            <li class="jstree-close">jquery-2.1.1.js</li>
						                                            <li class="jstree-close">jquery-ui.custom.min.js</li>
						                                            <li class="jstree-close">jquery-ui-1.10.4.min.js</li>
						                                        </ul>
						                                    </li>
						                                    <li class="jstree-close"> 城镇调查失业率</li>
						                                    <li class="jstree-close"> 房地产</li>
						                                    <li class="jstree-close"> 国内贸易</li>
						                                    <li class="jstree-close"> 对外经济</li>
						                                    <li class="jstree-close"> 交通运输</li>
						                                    <li class="jstree-close"> 邮电通信</li>
						                                    <li class="jstree-close"> 采购经理指数</li>
						                                    <li class="jstree-close"> 财政</li>
						                                    <li class="jstree-close"> 金融</li>
						                                </ul>
						                            </li>
						                        </ul>
						                    </div>
					                    </div>
					                </div>
					            </div>
					            <!-- 华丽的分割线 -->
	                                    <div class="col-lg-9 animated fadeInRight">
							                <div class="mail-box">
							                <div class="table1">
							                <table class="table" cellspacing="0">
							                	<thead>
							                		<tr><th rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">指标</th></tr>
							                		 <tr style="visibility: hidden;">
										                <th></th>
										                <th></th>
										            </tr>
							                	</thead>
							                	<tbody id="wai_tbody">
							                		
							                	</tbody>
							                </table>
							                </div>
							                <div class="table2">
							                <table class="table table-hover table-mail" cellspacing="0">
								                <thead>
								                	<tr>
								                		<th rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">指标</th>
														
													</tr>
													<tr id="time">
														<!-- 放第一排的时间 -->
													</tr>
								                </thead>
								                <tbody id="nei_tbody">
									                
								                
								                </tbody>
							                </table>
							                </div>
							                </div>
							            </div>
										
	                                </div>
                                
                               
                                
                                </div>

                                </div>

                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        </div>
		<jsp:include page="../components/footer.jsp" flush="true" />
        </div>
        </div>
        


    <!-- Mainly scripts -->
    <script src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.metisMenu.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.slimscroll.min.js"></script>

    <!-- Custom and plugin javascript -->
    <script src="${pageContext.request.contextPath }/js/inspinia.js"></script>
    <script src="${pageContext.request.contextPath }/js/pace.min.js"></script>
    
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

    <!-- FooTable -->
    <script src="${pageContext.request.contextPath }/js/footable.all.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/mypage.js"></script>
	<script src="${pageContext.request.contextPath}/js/anychart-base.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/userCustom.js"></script>
    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function() {
        	var data=${nowArray};
            createLine("宏观数据",1,data);
            $('.footable').footable();
            //分类获取函数
            classify();
            //数据获取函数
            aaaa();
        });
        
        	$("#list").click(function(){
        		//$('#list-two').attr('style','display:block');
        		$("#list-two").toggle()
        	});
        	
        	
   
        function paging(totalData,totalPage, pagenum) {
			$('#box').paging({
				initPageNo : pagenum, // 初始页码
				totalPages : totalPage, //总页数
				totalCount : '合计' + totalData + '条数据', // 条目总数
				slideSpeed : 600, // 缓动速度 单位毫秒
				jump : true, //是否支持跳转
				callback : function(page) {
					// 回调函数
				}
			});
		}

		function JumpToPage(pagenum) {
						aaaa(pagenum);
		}
		
		
		function aaaa(){
			//传入这三个参数获得详情数据
			var category='价格指数';//一级分类
			var recategory='居民消费价格分类指数(上年同月=100)';//二级分类
			var compare_theway='全国居民消费价格分类指数(上年同月=100)(2016-)';//三级分类
			$.ajax({
        		url : "${pageContext.request.contextPath}/governmentsector/nationalData-details",
        		type : "post",
        		data:{
        			category:category,
        			recategory:recategory,
        			compare_theway:compare_theway
        		},
        		success : function(res) {
        			var jsonarrary=res.endAraay;
                	$("#wai_tbody").html('');
                	$("#nei_tbody").html('');
                	$("#time").html('');
                	var wai_tbody='';
                	var data_tbody='';
                	for (var i = 0; i < jsonarrary.length; i++) {
                		var nei_tbody='';
                		var time='';
                		var name=jsonarrary[i].target_name;
                		wai_tbody+='<tr class="read"><td>'+name+'</td></tr>';
                		var data=jsonarrary[i].target;
                		var nei_name='';
                		for (var n = 0; n < data.length; n++) {
                			if(n==0){
                				nei_name='<td class="mail-ontact">'+name+'</td>';
                			}
                			nei_tbody+='<td class="mail-subject">'+data[n].target_data+'</td>';
                			
                			time+='<th>'+data[n].target_time+'</th>';
                			
                		}
                		$("#time").html(time);
                		data_tbody+='<tr class="read">'+nei_name+
                						nei_tbody+
                					'<tr>';
                	}
                	$("#nei_tbody").html(data_tbody);
                	$("#wai_tbody").html(wai_tbody);
        		},
        		error : function(e) {
        		}
        	});
        	
        }
		
		//获取分类 函数
		function classify(){
			var category="价格指数";
			var recategory="居民消费价格分类指数(上年同月=100)";
			$.ajax({
        		url : "${pageContext.request.contextPath}/governmentsector/nationalData-list",
        		type : "post",
        		data:{
        			category:category,
        			recategory:recategory
        		},
        		success : function(res) {
        			//不带参请求会拿到一级目录
        			//传入一级目录  会拿到二级目录category
        			var array=res.buckets;
        			for (var i = 0; i < array.length; i++) {
        				console.log(array[i].key);
        			}
    				
        			
        		},
        		error : function(e) {
        		}
        	});
		}
		
		
		function jstree(){
			
		}
		
		
		//跑马灯方法 
// 		 function init(){
// 			    //获取标题
// 			    var title=document.title;
// 			    //分割字符串--->字符数组
// 			    var arr=title.split("");
// 			    //删除第一个元素并返回该元素
// 			    var e=arr.shift();
// 			    //把一个对象添加到数组末尾
// 			    arr.push(e);
// 			    //把数组转换成字符串
// 			    var marquee=arr.join("");
// 			    //返回给浏览器
// 			    document.title=marquee;
// 			    //定时一直执行
// 			    window.setTimeout("init()",1000);
// 			}
// 			window.onload=init;
		 
		
    </script>
    <style>
    .jstree-open > .jstree-anchor > .fa-folder:before {
        content: "\f07c";
    }

    .jstree-default .jstree-icon.none {
        width: 0;
    }
</style>

<script>

    $(document).ready(function(){
    	
    	$('#jstree1').jstree({
            'core' : {
                'check_callback' : true,
                'multiple':false
                
	   	         
            },
            'plugins' : [ 'types', 'dnd' ],
            'types' : {
                'default' : {
                    'icon' : 'fa fa-folder'
                },
                'html' : {
                    'icon' : 'fa fa-file-code-o'
                },
                'svg' : {
                    'icon' : 'fa fa-file-picture-o'
                },
                'css' : {
                    'icon' : 'fa fa-file-code-o'
                },
                'img' : {
                    'icon' : 'fa fa-file-image-o'
                },
                'js' : {
                    'icon' : 'fa fa-file-text-o'
                }

            }
        });


    });
</script>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>


</body>

</html>
